<template>
    <div class="mylists">
        <div class="header">
            <van-nav-bar :title="route.query.title" left-arrow @click-left="onClickLeft" />
        </div>
        <div class="section-box">
            <van-tabs color="#000" line-width="60px" v-model:active="active" @click-tab="goNewshopp">
                <van-tab title="默认" name="default">
                    <div class="navs-list">
                        <ul>
                            <li v-for="item in searchlist.list" :key="item.gid" @click="goShoppingDetail(item.gid)">
                                <div class="shopping-box">
                                    <div class="img_box">
                                        <img :src="item.goods_img" alt="" />
                                    </div>
                                    <p class="shopping-title">{{ item.goods_name }}</p>
                                    <div class="shopping-price">
                                        <span class="discount">￥{{ item.goods_price }}</span>
                                        <span class="original">￥{{ item.goods_price }}</span>
                                    </div>
                                </div>
                            </li>
                        </ul>
                    </div>
                </van-tab>
                <van-tab title="新品" name="goods_xp">
                    <div class="navs-list">
                        <ul>
                            <li v-for="item in xplist.list" :key="item.gid" @click="goShoppingDetail(item.gid)">
                                <div class="shopping-box">
                                    <div class="img_box">
                                        <img :src="item.goods_img" alt="" />
                                    </div>
                                    <p class="shopping-title">{{ item.goods_name }}</p>
                                    <div class="shopping-price">
                                        <span class="discount">￥{{ item.goods_price }}</span>
                                        <span class="original">￥3009</span>
                                    </div>
                                </div>
                            </li>
                        </ul>
                    </div>
                </van-tab>
                <van-tab title="人气" name="goods_rq">
                    <div class="navs-list">
                        <ul>
                            <li v-for="item in rqlist.list" :key="item.gid" @click="goShoppingDetail(item.gid)">
                                <div class="shopping-box">
                                    <div class="img_box">
                                        <img :src="item.goods_img" alt="" />
                                    </div>
                                    <p class="shopping-title">{{ item.goods_name }}</p>
                                    <div class="shopping-price">
                                        <span class="discount">￥{{ item.goods_price }}</span>
                                        <span class="original">￥3009</span>
                                    </div>
                                </div>
                            </li>
                        </ul>
                    </div>
                </van-tab>
                <van-tab title="价格" name="goods_price">
                    <div class="navs-list" :class="isShow ? 'active' : 'active2'">
                        <ul>
                            <li v-for="item in pricelist.list" :key="item.gid" @click="goShoppingDetail(item.gid)">
                                <div class="shopping-box">
                                    <div class="img_box">
                                        <img :src="item.goods_img" alt="" />
                                    </div>
                                    <p class="shopping-title">{{ item.goods_name }}</p>
                                    <div class="shopping-price">
                                        <span class="discount">￥{{ item.goods_price }}</span>
                                        <span class="original">￥3009</span>
                                    </div>
                                </div>
                            </li>
                        </ul>
                    </div>
                </van-tab>
            </van-tabs>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { getSearchList } from "../../api/index";
import { ref, reactive, toRaw } from "vue";
import { useStore } from "../../store/index";
import { useUserInfo } from "../../store/user";
import { useRouter, useRoute } from "vue-router";
import { showToast } from "vant";

let router = useRouter();
let route = useRoute();
const store = useUserInfo();

let flag = ref(false);
const activeName = ref("default");
const active = ref(0);
let searchlist = reactive({
    list: [],
});
let xplist = reactive({
    list: [],
});
let rqlist = reactive({
    list: [],
});
let pricelist = reactive({
    list: [],
});
let isShow = ref(false);

const onClickLeft = () => history.back();

//去商品详情
const goShoppingDetail = (gid: number) => {
    let look = localStorage.getItem("user_look");
    if (look === null) {
        let lookArr = gid;
        localStorage.setItem("user_look", JSON.stringify(lookArr.toString()));
        store.getUserLook(lookArr.toString());
        // console.log("1.0", store.$state.user_look);
    } else {
        let lookArr = JSON.parse(localStorage.getItem("user_look")).split(",");
        // console.log("1.0", lookArr);
        lookArr.push(gid.toString());
        let Myset = new Set(lookArr);
        // console.log("2.0", Myset);
        lookArr = Array.from(Myset);
        localStorage.setItem("user_look", JSON.stringify(lookArr.toString()));
        store.getUserLook(lookArr.toString());
        // console.log("1.0", store.$state.user_look);
    }
    router.push({
        name: "detail",
        query: {
            gid,
        },
    });
};

//分类
const goNewshopp = ({ name }) => {
    if (name == "default") {
        // console.log(111);
        isShow.value = false;
    }
    if (name == "goods_xp") {
        isShow.value = false;
        xplist.list = toRaw(searchlist.list).filter((item) => {
            if (item.goods_xp == 1) {
                return item;
            }
        });
    }
    if (name == "goods_rq") {
        isShow.value = false;
        let list = toRaw(searchlist.list).filter((item) => {
            if (item.goods_rq == 1) {
                return item;
            }
        });
        rqlist.list = list.reverse();
    }
    if (name == "goods_price") {
        isShow.value = !isShow.value;
        console.log(isShow.value);
        let list: any = toRaw(searchlist.list);
        let arr = [];
        for (let key in list) {
            if (typeof list[key] == "object") {
                arr[key] = list[key];
            } else {
                arr[key] = list[key];
            }
        }
        if (isShow.value) {
            arr.sort((a: any | any[], b: any | any[]) => {
                let a_price = parseInt(a.goods_price);
                let b_price = parseInt(b.goods_price);
                return a_price - b_price;
            });
        }
        if (!isShow.value) {
            arr.sort((a: any | any[], b: any | any[]) => {
                let a_price = parseInt(a.goods_price);
                let b_price = parseInt(b.goods_price);
                return b_price - a_price;
            });
        }

        pricelist.list = arr;
    }
};

//初始化
const init = () => {
    let data = {
        search: route.query.title,
    };
    getSearchList(data).then((res: any) => {
        searchlist.list = res.content;
    });
};
init();
</script>

<style lang="scss" scoped>
.mylists {
    width: 100%;
    .header {
        width: 100%;
        position: fixed;
        top: 0;
        left: 0;
        z-index: 1;
    }
    .section-box {
        // padding: 20px 10px 0;
        padding: 42px 0 0;

        :deep(.van-tabs__line) {
            border-radius: 0;
        }
        :deep(.van-tabs--line .van-tabs__wrap) {
            width: 100%;
            position: fixed;
            top: 42px;
            left: 0;
        }

        .navs-list {
            width: 100%;
            padding: 50px 10px 0;
            // height: 300px;
            // border: 1px solid #000;
            ul {
                display: flex;
                flex-wrap: wrap;
                justify-content: space-between;
            }
            li {
                background: #fff;
                width: 48%;
                // height: 300px;
                padding-bottom: 15px;
                margin-bottom: 25px;
            }
            .shopping-box {
                .img_box {
                    width: 100%;
                    height: 200px;
                    img {
                        width: 100%;
                        height: 100%;
                    }
                }
            }
            .shopping-title {
                margin: 15px 0 5px;
                height: 34px;
                line-height: 17px;
                font-size: 13px;
                color: #313131;
                overflow: hidden;
                // text-overflow: ellipsis;
                -webkit-line-clamp: 2;
                display: -webkit-box;
                -webkit-box-orient: vertical;
            }
            .shopping-price {
                font-size: 13px;
                color: #c7273a;
                span {
                    padding-right: 10px;
                }
            }
            .original {
                text-decoration: line-through;
                color: #999;
            }
        }
    }
    :deep(.van-tab__text--ellipsis) {
        position: relative;
    }

    :deep(.van-tabs-1-3) {
        position: relative;
    }
    .navs-list {
        &:before {
            content: "";
            position: absolute;
            top: 17px;
            right: 22px;
            display: block;
            width: 5px;
            height: 5px;
            border: 1px solid #999;
            transform: rotate(45deg);
            border-right-color: transparent;
            border-bottom-color: transparent;
        }
        &:after {
            content: "";
            position: absolute;
            top: 22px;
            right: 22px;
            display: block;
            width: 5px;
            height: 5px;
            border: 1px solid #999;
            transform: rotate(45deg);
            border-left-color: transparent;
            border-top-color: transparent;
        }
    }
    .active {
        &:before {
            content: "";
            position: absolute;
            top: 17px;
            right: 22px;
            display: block;
            width: 5px;
            height: 5px;
            border: 1px solid #000;
            transform: rotate(45deg);
            border-right-color: transparent;
            border-bottom-color: transparent;
        }
    }
    .active2 {
        &:after {
            content: "";
            position: absolute;
            top: 22px;
            right: 22px;
            display: block;
            width: 5px;
            height: 5px;
            border: 1px solid #000;
            transform: rotate(45deg);
            border-left-color: transparent;
            border-top-color: transparent;
        }
    }
    :deep(.van-nav-bar) {
        background: #353535;
    }
    :deep(.van-nav-bar__title) {
        color: #fff;
        font-weight: normal;
    }
    :deep(.van-nav-bar .van-icon) {
        color: #fff;
    }
}
</style>
